<template>
  <div class="editor-container">
    <Toolbar
      class="toolbar-container"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      class="editor-content"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
      :style="{ height: '300px' }"
    />
  </div>
</template>

<script setup name="WangEditorBox">
import { ref, shallowRef, onBeforeUnmount, watch } from 'vue';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:modelValue', 'change']);

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const valueHtml = ref('');
const mode = ref('default');

// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    'headerSelect',
    'bold',
    'italic',
    'underline',
    'through',
    {
      key: 'group-more-style',
      title: '更多',
      menuKeys: ['clearStyle'],
    },
    '|',
    'color',
    'bgColor',
    {
      key: 'group-justify',
      title: '对齐',
      menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter'],
    },
    {
      key: 'group-indent',
      title: '缩进',
      menuKeys: ['indent', 'delIndent'],
    },
    '|',
    'fontSize',
    'fontFamily',
    'lineHeight',
    '|',
    'bulletedList',
    'numberedList',
    '|',
    'insertLink',
    'insertImage',
    'insertTable',
    '|',
    'undo',
    'redo',
  ],
};

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容',
  autoFocus: false,
  MENU_CONF: {
    uploadImage: {
      server: '/api/system/uploadPic',
      fieldName: 'file',
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      customInsert(res, insertFn) {
        if (res.code === 200 && res.data) {
          insertFn(res.data);
        }
      },
    },
  },
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 初始化创建完成
const handleCreated = (editor) => {
  editorRef.value = editor;
};

// 处理内容变化
const handleChange = (editor) => {
  const html = editor.getHtml();
  emit('update:modelValue', html);
  emit('change', html);
};

// 监听内容变化
watch(
  () => props.modelValue,
  (val) => {
    if (val !== valueHtml.value) {
      valueHtml.value = val;
    }
  },
  { immediate: true }
);

// 监听编辑器内容变化
watch(
  () => valueHtml.value,
  (val) => {
    emit('update:modelValue', val);
    emit('change', val);
  }
);
</script>

<style lang="scss" scoped>
.editor-container {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;

  // 添加编辑器内容区域的样式
  :deep(.w-e-text-container) {
    // 设置最小高度
    min-height: 200px !important;

    // 处理内容溢出
    [data-w-e-textarea='true'] {
      overflow-wrap: break-word !important;
      word-wrap: break-word !important;
      word-break: break-all !important;
    }

    // 处理图片溢出
    img {
      max-width: 100% !important;
      height: auto !important;
    }
  }

  // 处理工具栏溢出
  :deep(.w-e-toolbar) {
    flex-wrap: wrap !important;
  }
}

// 处理只读模式的内容显示
:deep(.w-e-text-container) {
  .w-e-text {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-all !important;

    p {
      margin: 0;
      padding: 0;
      white-space: pre-wrap !important;
    }

    img {
      max-width: 100% !important;
      height: auto !important;
    }
  }
}
</style>
